<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui">

    <body>

        <ui:composition template="./../template.xhtml">

            <ui:define name="title">
                User SignUp
            </ui:define>

            <ui:define name="content">

                <h:form id="formx">

                    <p:panel id="panel" header="User register">
                        
                        <h:panelGrid columns="2" >
                            
                            <h:outputLabel for="Password" value="Password: *" styleClass="art-postheader" style="font-size: 16px" />
                            <p:password id="Password" value="#{userController.newPassword}" label="Password" required="true"
                                        match="newPassConfirm" validatorMessage="password confirm sam as password"
                                         requiredMessage="Password must not blank!.">
                                <f:validateLength minimum="2" />
                            </p:password>
                            
                            <h:outputLabel for="newPassConfirm" value="newPassConfirm: *" styleClass="art-postheader" style="font-size: 16px"/>
                            <p:password id="newPassConfirm" requiredMessage="Password Confirm must same as Password" value="#{userController.newPasswordConfirm}" label="CPassword" required="true">
                            </p:password>
                            
                            <h:outputLabel for="UserName" value="UserName: *" styleClass="art-postheader" style="font-size: 16px" />
                            <p:inputText id="UserName" value="#{userController.newUsername}" label="UserName" requiredMessage="User Name Must not blank!" required="true">
                            </p:inputText>
                            
                            <h:outputLabel for="Gender" value="Gender: *" styleClass="art-postheader" style="font-size: 16px"/>
                            <p:selectOneRadio requiredMessage="Gender must choose!" required="true" id="options" value="#{userController.newGender}">
                                <f:selectItem itemLabel="Male" itemValue="1"/>
                                <f:selectItem itemLabel="Female" itemValue="0" />
                            </p:selectOneRadio>

                           <h:outputLabel for="Email" value="Email: *" styleClass="art-postheader" style="font-size: 16px"/>
                           <p:inputText id="Email" requiredMessage="Email must not Blank!" value="#{userController.newEmail}" label="Email" required="true"
                                        validatorMessage="Email is not mach!">
                                        <f:validateRegex pattern="[\w\.-]*[a-zA-Z0-9_]@[\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]" />
                           </p:inputText>
                            
                            <h:outputLabel for="Birthday" value="Birthday: *" styleClass="art-postheader" style="font-size: 16px"/>
                            <p:calendar value="#{userController.newBirthday}" id="Birthday" title="Birthday" effect="drop"
                                required="true" requiredMessage="Birthday field is required."
                                mindate="#{userController.minDobDate}" maxdate="#{userController.maxDobDate}" pattern="dd/MM/yyyy">
                            </p:calendar>
                            <h:outputLabel for="PhoneNumber" value="PhoneNumber: *" styleClass="art-postheader" style="font-size: 16px"/>
                            <p:inputMask id="PhoneNumber" value="#{userController.newPhoneNumber}" mask="(999) 999-9999">
                             
                            </p:inputMask>
                            
                            
                            <h:outputLabel for="Address" value="Address: *" styleClass="art-postheader" style="font-size: 16px"/>
                            <p:inputTextarea id="Address" style="width: 170px" value="#{userController.newAddressInfo}" label="Address">
                            </p:inputTextarea>
                            
                        </h:panelGrid>

                        <p:commandButton action="#{userController.create}"  id="btnsave" value="Insert" ajax="false"/>
                        <p:commandButton value="Reset" type="reset" ajax="false"/>
                        <p:commandButton value="Cancel" action="#{userController.backToHome}" ajax="false" immediate="true"/>
                    </p:panel>

                </h:form>
            </ui:define>

        </ui:composition>

    </body>
</html>
